<!-- 前台店长 – 首页 – 课程管理 – 课程列表				Generation -->
<template>
	<view class="warps">
		<view class="">
			<view class="Members-biaoges">
				<view class="vw60 f b c" style="margin-left:240rpx;" @click="gets()">
					<text class="fs32 bold">大池初级课 课程表</text>
					<image style="width:24rpx;height:28rpx;" src="../../../static/img/102.png" mode=""></image>
				</view>
				<view class="" v-if="showa == true">
					<view class="Increase-top f">
						<view class="f d senter">
							<view class="f d" style="width:190rpx;height:80rpx; line-height:80rpx;"
								:class="DA==0?'hei':'hui'" @click="DAs(0)">
								<text class="fs32 bold">大池</text>
							</view>
							<view class="quanxians"></view>
							<view class="f d" style="width:190rpx;height:80rpx; line-height:80rpx;"
								:class="DA==1?'hei':'hui'" @click="DAs(1)">
								<text class="fs32 bold">小池</text>
							</view>
							<view class="quanxians"></view>
						</view>
						<view class="f d senter" style="width:260rpx;height:80rpx;line-height:80rpx;" v-show="DA==0">
							<text>初级班</text>
							<view class="quanxiansa"></view>
							<text>提高班</text>
							<view class="quanxiansa"></view>
							<text>高级班</text>
							<view class="quanxiansa"></view>
							<text>贵族一对一</text>
							<view class="quanxiansa"></view>
							<text>贵族一对二</text>
							<view class="quanxiansa"></view>
							<text>贵族一对三</text>
							<view class="quanxiansa"></view>
							<text>公司集体课</text>
							<view class="quanxiansa"></view>
						</view>
						<view class="f d senter" style="width:260rpx;height:80rpx;line-height:80rpx;" v-show="DA==1">
							<text>贝壳级</text>
							<view class="quanxiansa"></view>
							<text>海星级</text>
							<view class="quanxiansa"></view>
							<text>水母级</text>
							<view class="quanxiansa"></view>
							<text>海马级</text>
							<view class="quanxiansa"></view>
							<text>小丑鱼级</text>
							<view class="quanxiansa"></view>
							<text>海龟级</text>
							<view class="quanxiansa"></view>
							<text>大鲨鱼级</text>
							<view class="quanxiansa"></view>
							<text>大鲨鱼级</text>
						</view>
					</view>
				</view>
			</view>
			<view class="f c" style="background:#fff;">
				<view class="All-lan senter p_t_31">
					<text class="white fs24">选择时间</text>
				</view>
				<view class="vw75 f b c mars">
					<view class="f d c" :class="DB==0?'hei':'hui'" @click="DBs(0)">
						<text class="fs32 bold">周一</text>
						<text class="fs20">日期</text>
					</view>
					<view class="f d c" :class="DB==1?'hei':'hui'" @click="DBs(1)">
						<text class="fs32 bold">周二</text>
						<text class="fs20">日期</text>
					</view>
					<view class="f d c" :class="DB==2?'hei':'hui'" @click="DBs(2)">
						<text class="fs32 bold">周三</text>
						<text class="fs20">日期</text>
					</view>
					<view class="f d c" :class="DB==3?'hei':'hui'" @click="DBs(3)">
						<text class="fs32 bold">周四</text>
						<text class="fs20">日期</text>
					</view>
					<view class="f d c" :class="DB==4?'hei':'hui'" @click="DBs(4)">
						<text class="fs32 bold">周五</text>
						<text class="fs20">日期</text>
					</view>
					<view class="f d c" :class="DB==5?'hei':'hui'" @click="DBs(5)">
						<text class="fs32 bold">周六</text>
						<text class="fs20">日期</text>
					</view>
				</view>
			</view>
			<view class="f">
				<view class="curriculum-kuan ">
					<view class="senter p_t_60">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_80">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_100">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_95">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_90">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_90">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_90">
						<text class="fs24">时间</text>
					</view>
					<view class="senter p_t_90">
						<text class="fs24">时间</text>
					</view>
				</view>
				<view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-hui senter">
							<text class="">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
					</view>
					<view class="f">
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-hui senter">
							<text class="">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-kes">

						</view>
					</view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-ke senter m_l_5">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-hui senter">
							<text class="">课程</text>
						</view>
					</view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
					</view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
					</view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
					</view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
					</view>
					<view class="f">
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
						<view class="curriculum-kes">

						</view>
						<view class="curriculum-ke senter">
							<text class="white">课程</text>
						</view>
					</view>
				</view>
			</view>
			<view class="Generation-di">
				<view class="vw50 f b c m_l_30">
					<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in list" :key="index" 
						:name="item.name"
						shape="square"
						:disabled="item.disabled"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
				</view>
				<view class="Generation-but" @click="a">
					<button type="default">代学员约课</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showa: false,
				DC: 1, //  0:课程列表   1:排课    2:约课      4:评价
				DB: 0,
				DA: 0,
				value: '',
				list: [
					{
						name: '可预约',
						disabled: false
					},
					{
						name: '不可预约',
						disabled: false
					}
				],
				listsa: [{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					}
				],
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '代约课'
			})
		},
		methods: {
			DCs(e) {
				this.DC = e
			},
			DBs(e) {
				this.DB = e
			},
			DAs(e) {
				this.DA = e
			},
			ZDs(e) {
				this.ZD = e
			},
			gets() {
				this.showa = !this.showa
			},
			ao() {
				uni.navigateTo({
					url: "../../jiaolianduan/details/details"
				})
			},
			a() {
				uni.navigateTo({
					url: "Lesson/Lesson"
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.value = e
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
		}
	}
</script>

<style>
	.warps {
		/* height:180vh; */
		overflow: hidden;
		background-color: #F6F8FC;
	}

	.quanxians {
		width: 160rpx;
		height: 2rpx;
		opacity: 1;
		border: 2rpx solid #b8d3fd;
		margin-left: 20rpx;
	}

	.quanxiansa {
		width: 228rpx;
		height: 2rpx;
		opacity: 1;
		border: 2rpx solid #b8d3fd;
		margin-left: 20rpx;
	}

	.f_x {
		display: flex;
	}

	.bgfc {
		width: 750rpx;
		height: 68rpx;
		line-height: 68rpx;
		opacity: 1;
		background: #f3f3f3;
	}

	.col {
		color: #1F73F2;
	}

	.lan {
		border: 2rpx solid #1f73f2;
		color: #1f73f2;
	}

	.cheng {
		border: 2rpx solid #ff7105;
		color: #ff7105;
	}

	.hong {
		border: 2rpx solid #ce2424;
		color: #ce2424;
	}

	.curriculum-buta {
		width: 134rpx;
		height: 50rpx;
		line-height: 50rpx;
		opacity: 1;
		background: #fcfcfc;
		border-radius: 8rpx;
	}

	.Members-biaoges {
		width: 750rpx;
		height: 76rpx;
		line-height: 76rpx;
		opacity: 1;
		background: #f1f6ff;
	}

	.All-lan {
		width: 120rpx;
		height: 94rpx;
		opacity: 1;
		background: #1f73f2;
	}

	.curriculum-kuan {
		width: 120rpx;
		background: #fff;
		height: 1040rpx;
	}

	.curriculum-ke {
		width: 100rpx;
		height: 130rpx;
		line-height: 130rpx;
		opacity: 1;
		background: linear-gradient(180deg, #b377f7, #1fa5f2);
	}

	.curriculum-kes {
		width: 100rpx;
		height: 130rpx;
		line-height: 130rpx;
		opacity: 1;
		border: 2rpx solid #CBCBCB;
	}

	.curriculum-hui {
		width: 100rpx;
		height: 130rpx;
		line-height: 130rpx;
		opacity: 1;
		background: #e0e0e0;
	}

	.Increase-top {
		width: 452rpx;
		height: 656rpx;
		opacity: 1;
		background: #DEE9FC;
		border-radius: 8rpx;
		position: absolute;
		top: 145rpx;
		left: 270rpx;
		z-index: 99;
	}

	.information-buts {
		width: 228rpx;
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		opacity: 1;
		background: #ffffff;
		border: 2rpx solid #1f73f2;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		color: #1f73f2;
	}

	.Generation-di {
		width: 750rpx;
		height: 238rpx;
		background: #F6F8FC;
		padding-top: 40rpx;
	}

	.Generation-di-yu {
		width: 34rpx;
		height: 34rpx;
		opacity: 1;
		background: linear-gradient(180deg, #b377f7, #1fa5f2);
	}

	.Generation-di-bu {
		width: 34rpx;
		height: 34rpx;
		opacity: 1;
		background: #e0e0e0;
	}

	.Generation-but {
		margin-top: 36rpx;
	}

	.Generation-but>button {
		width: 280rpx;
		height: 66rpx;
		line-height: 66rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #ffffff;
	}
</style>
